<template>
  <h3>组件生命周期应用</h3>
  <p ref="name">百战程序员</p>
  <ul>
    <li v-for="(item, index) of banner" :key="index">
      <h3>{{ item.title }}</h3>
      <p>{{ item.conten }}</p>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      banner: []
    }
  }
  , beforeMount() {
    console.log(this.$refs.name)// undefined

  }
  , mounted() {
    console.log(this.$refs.name)
    // 模拟网络请求
    this.banner = [
      {
        'title': '我在爱尔兰'
        , 'conten': '爱尔兰很好'
      }
      , {
        'title': '我在爱尔兰'
        , 'conten': '爱尔兰很好'
      }
      , {
        'title': '我在爱尔兰'
        , 'conten': '爱尔兰很好'
      }
    ]
  }
}
</script>